<template>
	<div>
		<!-- 登录框 -->
		<div class="animated fadeIn login_body column">
			<div class="login-input-k column">
				<img src="../../assets/logo.png" class="logo" />
				<p class="title">用户登录</p>
				<div class="input-k column">
					<div>
						<span class="iconfont icon-yonghuming"></span>
						<input placeholder="用户名" v-model="loginInfo.username" />
					</div>
					<div>
						<span class="iconfont icon-tianchongxing-"></span>
						<input type="password" placeholder="密码" v-model="loginInfo.password" />
					</div>
					<el-button type="primary" @click="loginClick" :loading="butLoading">登录</el-button>
				</div>
			</div>
		</div>
		<StartLoading />
	</div>
</template>

<script>
import {
	ElMessage
} from "element-plus"
import { useRouter } from 'vue-router'
import {
	useAccountStore
} from '../../stores/account'
import { wsManager } from '../../utils/wsManager'

export default {
	setup() {
		const router = useRouter()
		const accountStore = useAccountStore()

		return {
			router,
			accountStore
		}
	},
	data() {
		return {
			butLoading: false,
			loginInfo: {}
		}
	},
	created() {
		//关闭ws
		wsManager.disconnect()
	},
	methods: {
		loginClick() {
			this.butLoading = true
			let data = this.loginInfo
			this.accountStore.login(this.loginInfo.username, this.loginInfo.password).then(res => {
				if (res.code !== 200) {
					throw new Error(res.message)
				}
				let toPath = '/'
				this.router.push(toPath)
			}).catch(err => {
				ElMessage.error(err.message)
			}).finally(() => {
				setTimeout(() => {
					this.butLoading = false
				}, 200)
			})
		}
	}
}
</script>

<style scoped="scoped">
.login {
	display: block;
	margin: 0 auto;
	margin-top: 20px;
	font-size: 12px;
	width: 100px;
	line-height: 30px;
	color: #ffffff;
	text-align: center;
	background: linear-gradient(180deg, #709cfa 0%, #2567f7 51%, #0750f9 75%);
	border-radius: 4px;
	border-width: 0;
}

.input-k div {
	border-bottom: 1px solid #888888;
	margin-bottom: 10px;
}

.input-k span {
	color: #888888;
}

input {
	border-width: 0;
}

.title {
	font-weight: 700;
	margin-top: 10px;
}

.input-k {
	margin-top: 50px;
}

.login-input-k .logo {
	width: 60px;
	height: 60px;
}

.login-input-k {
	background-color: #ffffff;
	width: 700px;
	height: 480px;
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	-moz-box-shadow: 2px 2px 5px #626262;
	-webkit-box-shadow: 2px 2px 5px #626262;
	box-shadow: 2px 2px 5px #626262;
}

.login_body {
	background-color: #888888 !important;

}

.start-text {
	font-size: 12px;
	color: #888888;
	text-align: center;
}

.ing {
	background-color: #74f2b8;
	height: 100%;
	width: 0%;
	border-radius: 100px;
}

.loading {
	margin-top: 170px;
}

.loading-t {
	width: 200px;
	height: 8px;

}

.randy-start,
.login_body {
	background-color: #000000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
}

.logo {
	width: 100px;
	height: 100px;
}
</style>